:root {
	--bg: #000201;
	--greenerBg: #0c0e0d;
	--text: #f2f2f2;
	--accent1: #59dafb;
	--dimAccent1: #3d98af;
	--accent2: #a5fb59;
	--dimAccent2: #66b322;
	--dimText: #444444;
}

body {
	font-family: Satoshi;
	background: var(--bg);
	color: var(--text);
}

a {
	text-decoration: underline;
	color : var(--text);
}

#foreground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

#foreground > * {
	padding: 50px;
	border-radius: 10px
}

#foreground h1 {
	margin-bottom: 5px;
}

#foreground p {
	margin-top: 5px;
}

#foreground > .flex > .flex {
	margin-top: 25px
}

#noIntro {
	background: var(--dimAccent2)
}

.flex {
	display: flex;
}

.centre {
	justify-content: center;
	align-items: center;
}

.vert {
	flex-direction: column;
}

.hori {
	flex-direction: row;
	gap: 20px;
}

.textCentre {
	text-align: center;
}

.text {
	background: transparent;
	color: var(--text);
	padding: 10px;
}

.card {
	max-width: 720px;
	width: 90%;
	outline: 1px solid rgba(255,255,255,0.12);
	background: rgba(255,255,255,0.02);
	box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

.circle {
	position: absolute;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    background-color: var(--accent1);
	z-index: -1;
}

.ball {
	position: relative;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	background-color: var(--accent1);
	z-index: -1;
}

#animations {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	width: calc(100% - 40px);
	padding: 20px;
	box-sizing: border-box;
}

#balls {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

button {
	margin-top: 5px;
	background: var(--text);
	border: 0;
	flex-grow: 1;
	padding: 10px;
	border-radius: 20px;
	cursor: pointer;
	background: var(--accent2);
	transition: all 0.3s ease;
}

button:hover {
	box-shadow: var(--accent2) 0px 0px 10px;
}

.btnBar {
	margin-top: 5px
}

/* button:nth-child(1) {
	background: var(--accent2) !important;
} */

#animations p {
	margin-top: 0;
}

#animations h1 {
	margin-bottom: 0;
}

input {
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
	.hori { flex-direction: column; gap: 12px; }
	.card { width: 95%; padding: 20px; }
	#foreground > * { padding: 24px; }
	#animations { width: calc(100% - 32px); padding: 16px; }
	.btnBar { width: 100%; display: flex; flex-direction: column; }
	button { width: 100%; padding: 12px; border-radius: 12px; }
	.ball, .circle { height: 44px; width: 44px; }
}

@media (max-width: 480px) {
	body { font-size: 14px; }
	#foreground > * { padding: 16px; }
	.card { padding: 14px; }
	input { padding: 8px; }
	.hori { gap: 8px; }
}

/* .btnBar {
	transition: all 0.3s ease;
} */